<template>
	<view class="page">
		<!-- 个人资料 -->
		<view class="top">
			<view class="top-bg" :style="{backgroundImage:bgheadSrc}">
				<view class="person">
					<view class="person-right">
						<u-avatar size="96" class="avatar" :src="myuserinfo.headimgurl" :show-level="myuserinfo.rank>0"></u-avatar>
						<view class="personInfo u-flex u-row-between" v-if="isLogin">
							<div>
								<h3 class="colorWhite userName" style="{font-weight:500}">{{myuserinfo.user_name}}</h3>
								<view class="u-font-xs">
									<!-- <u-tag text="尊享会员"  shape="circle" size="mini" type="warning" mode="dark" /> -->
									<u-tag text="尊享会员" v-if="vip" shape="circle" size="mini" type="warning" />
								</view>
							</div>
							<div style="margin-top: 60upx">
								<!-- <span @click="$u.route('/pagesB/message/message')">
									<u-icon :name="imgStaticUrl+'/images/icon-newsWhite.png'" size="42"></u-icon>
									<view v-if="imcountnumtips != 0" class="imcount">{{imcountnumtips}}</view>
								</span> -->
								<span @click="$u.route('/pagesB/setting/setting',{userInfo:myuserinfo})">
									<u-icon name="setting" class="u-m-l-20" color="#fff" size="54"></u-icon>
								</span>
							</div>
						</view>
						<!--  #ifndef  MP-WEIXIN -->
						<view class="login c3 colorWhite" v-if="!isLogin"
							@click="navigateTo('/pagesB/login/login')">{{$t('登录')}}/{{$t('注册')}}</view>
						<!--  #endif -->
						<!--  #ifdef  MP-WEIXIN -->
						<u-button size="mini" style="margin:0 30upx " shape="circle" type="success" v-if="!isLogin"
							lang="zh_CN" @click="wechatLogin">{{$t('登录')}}
						</u-button>
						<!--  #endif -->

					</view>


					<!-- 在小程序里调试用  打开  -->

				</view>

				<view class="topPanelWrap" v-if="false">
					<div>
						<h3 class="topPanelNum">0</h3>
						<p>{{$t('收藏夹')}}</p>
					</div>
					<div>
						<h3 class="topPanelNum">0</h3>
						<p>{{$t('关注的店铺')}}</p>
					</div>
					<div>
						<h3 class="topPanelNum">0</h3>
						<p>{{$t('足迹')}}</p>
					</div>
					<div @click="$u.route({url:'/pagesC/order/allOrder',params:{index:6}})">
						<h3 class="topPanelNum">0</h3>
						<p>{{$t('全部订单')}}</p>
					</div>
				</view>


			</view>
		</view>


		<div class="integralBox">
			<div class="left integralBoxitem" @click="navigateTo('/pagesC/wallet/wallet')">
				<h4 class="integralBoxtitle">{{$t('我的钱包')}}</h4>
				<p class="integralBoxtip">{{$t('余额明细')}}</p>
				<u-icon class="integralBoxicon" v-if="cosUrl" :name="cosUrl+'images/icon-wallet2.png'" color="#2979ff"
					size="88">
				</u-icon>
			</div>
			<div class="right integralBoxitem" @click="$u.route({url:'/pagesC/integral/index',params:{index:6}})">
				<h4 class="integralBoxtitle">{{$t('积分商城')}}</h4>
				<p class="integralBoxtip">{{$t('积分优惠')}}</p>
				<u-icon class="integralBoxicon" v-if="cosUrl" style="right:10upx"
					:name="cosUrl+'images/img-scoreGIft.png'" color="#2979ff" size="138"></u-icon>
			</div>
		</div>

		<!-- 我的订单 -->
		<view class="box">
			<view class="innerBox">
				<view class="order-title">
					<view class="left">{{$t('我的订单')}}</view>
					<view class="right" @click="order('/pagesC/order/allOrder')">{{$t('查看全部')}}<u-icon name="arrow-right"
							size="24"></u-icon>
					</view>
				</view>
				<view class="Orderlist">
					<view class="item" @click="order('/pagesC/order/allOrder',{index:1})">
						<!-- <view class="orderMarkNum" v-if="myuserinfo && myuserinfo.pay_num> 0">{{myuserinfo.pay_num}}</view> -->

						<view class="icon">
							<image src="/static/images/icon-myWaitPay.png"></image>
							<u-badge :count="myuserinfo && myuserinfo.pay_num > 0 ? myuserinfo.pay_num : 0"
								size="default" type="error" :offset="[-10,-10]"></u-badge>
						</view>
						<view class="text f24 c6">{{$t('待付款')}}</view>
					</view>
					<view class="item" @click="order('/pagesC/order/allOrder',{index:2})">
						<!-- <view class="orderMarkNum" v-if="myuserinfo && myuserinfo.send_num > 0">{{myuserinfo.send_num}}</view> -->

						<view class="icon">
							<image src="/static/images/icon-myWaitDeliver.png"></image>
							<u-badge :count="myuserinfo && myuserinfo.send_num > 0 ? myuserinfo.send_num : 0"
								size="default" type="error" :offset="[-10,-10]"></u-badge>
						</view>
						<view class="text f24 c6">{{$t('待发货')}}</view>
					</view>
					<view class="item" @click="order('/pagesC/order/allOrder',{index:3})">
						<!-- <view class="orderMarkNum" v-if="myuserinfo && myuserinfo.shou_num > 0">{{myuserinfo.shou_num}}</view> -->

						<view class="icon">
							<image src="/static/images/icon-myTakeGoods.png"></image>
							<u-badge :count="myuserinfo && myuserinfo.shou_num > 0 ? myuserinfo.shou_num : 0"
								size="default" type="error" :offset="[-10,-10]"></u-badge>
						</view>
						<view class="text f24 c6"> {{$t('待收货')}}</view>
					</view>
					<view class="item" @click="order('/pagesC/order/allOrder',{index:4})">
						<!-- <view class="orderMarkNum" v-if="myuserinfo && myuserinfo.ping_num > 0">{{myuserinfo.ping_num}}</view> -->
						<view class="icon">
							<image src="/static/images/icon-myWaitComment.png"></image>
							<u-badge :count="myuserinfo && myuserinfo.ping_num > 0 ? myuserinfo.ping_num : 0"
								size="default" type="error" :offset="[-10,-10]"></u-badge>
						</view>
						<view class="text f24 c6">{{$t('待评价')}}</view>
					</view>
					<view class="item" @click="navigateTo('/pagesC/order/refundList')">
						<!-- <view class="orderMarkNum" v-if="myuserinfo && myuserinfo.huan_num>0">{{myuserinfo.huan_num}}</view> -->

						<view class="icon">
							<image src="/static/images/icon-myWaitReturn.png"></image>
							<u-badge :count="myuserinfo && myuserinfo.huan_num > 0 ? myuserinfo.huan_num : 0"
								size="default" type="error" :offset="[-10,-10]"></u-badge>
						</view>
						<view class="text f24 c6">{{$t('售后')}}</view>
					</view>

				</view>
			</view>
		</view>


		<!-- 必备工具 -->
		<view class="box ">
			<view class="innerBox tools">
				<view class="toolsList">
				 <view class="toolsItem" @click="goShare">
					<view class="icon">
					  <image src="../../static/images/service3.png"></image>
					</view>
					<view class="text f24 c3">{{$t('邀请好友')}}</view>
				  </view> 
			  

          <!-- <view class="toolsItem" @click="navigateTo('/pagesC/wallet/wallet')">
            <view class="icon">
              <image src="../../static/images/icon7.png"></image>
            </view>
            <view class="text f24 c3">{{$t('我的钱包')}}</view>
          </view> -->
          <view class="toolsItem" @click="navigateTo('/pagesB/my/address')">
            <view class="icon">
              <image src="../../static/images/icon2.png"></image>
            </view>
            <view class="text f24 c3">{{$t('收货地址')}}</view>
          </view>
		  
          <view class="toolsItem" @click="navigateTo('/pagesB/member/member')">
            <view class="icon">
              <image src="../../static/images/icon1.png"></image>
            </view>
            <view class="text f24 c3">{{$t('升级会员')}}</view>
          </view>


          

          <!-- <view class="toolsItem" @click="goArticle('/pagesB/article/detail','购买帮助')">
            <view class="icon">
              <image src="../../static/images/icon10.png"></image>
            </view>
            <view class="text f24 c3">{{$t('购买帮助')}}</view>
          </view> -->
          <!-- <view class="toolsItem" @click="goArticle('/pagesB/article/detail','关于我们')">
            <view class="icon">
              <image src="../../static/images/icon8.png"></image>
            </view>
            <view class="text f24 c3">{{$t('关于我们')}}</view>
          </view> -->


          <view class="toolsItem" @click="showPopUpBox()">
           <view class="icon">
              <image src="../../static/images/icon9.png"></image>
            </view>
            <view class="text f24 c3">{{$t('客服')}}</view>
          </view>
		  <view class="toolsItem" @click="navigateTo('/pagesB/distribution/myTeam')">
		    <view class="icon">
		      <image src="../../static/images/service_2.png"></image>
		    </view>
		    <view class="text f24 c3">{{$t('我的团队')}}</view>
		  </view>

        </view>
      </view>
    </view>

    <view class="mask" v-if="showBox" @click="hideMask" catchtouchmove="false"></view>
   <view class="popUpBox" v-if="showBox">
      <view class="tel">
        <image :src="cosUrl+'images/tel.png'"></image>
      </view>
      <view class="text f30 c3" style="margin-top: 33upx;"> {{$t('客服热线')}}</view>
      <view class="text f30 c3">{{serviceHotline}}</view>
      <view class="button" @click="dail(serviceHotline)">{{$t('拨打电话')}}</view>
      <view class="cancel" @click="hideMask()">
        <u-icon name="close-circle" color="#eee" size="48"></u-icon>
      </view>
    </view>

    <!-- 商品列表 -->
		<u-divider bg-color="#f4f4f4" margin-top="40">
			<h3 class="cardTit">{{$t('猜你喜欢')}} <span class="cardTitbadge">{{$t('精选好货')}}</span> </h3>
		</u-divider>
		<u-waterfall v-model="goodsList" class="u-waterfall" ref="goodsWaterfall">
			<template v-slot:left="{leftList}">
				<view v-for="(item,index) in leftList" :key="index">
					<goodsCard :info="item" class="goodsCard"></goodsCard>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view v-for="(item,index) in rightList" :key="index">
					<goodsCard :info="item" class="goodsCard"></goodsCard>
				</view>
			</template>
		</u-waterfall>
		<loadMore :loadingType="loadingType"></loadMore>
		<share-mask ref="shareMask"></share-mask>
		<u-toast ref="uToast" />

		<u-popup mode="center" length="80%" border-radius="20" v-model="isInviteModelShow">
			<div class="invitePanel">
				<u-avatar size="large" :src="inviterInfo.avatar"></u-avatar>
				<p>{{$t('邀请人')}}{{inviterInfo.name}}</p>
				<div class="u-flex u-row-between bottom">
					<span @click="isInviteModelShow=false">{{$t('取消')}}</span>
					<!-- #ifdef MP-WEIXIN -->
					<u-button style="width:50%" size="mini" shape="circle" type="success" lang="zh_CN"
						@click="wechatLogin">{{$t('登录')}}</u-button>
					<!-- #endif -->
				</div>
			</div>
		</u-popup>

	</view>
</template>

<script>
	import ShareMask from "../../components/shareMask";
	import goodsCard from '@/components/goodsCard';
	let page = 1
	import {
		mapGetters
	} from 'vuex';
	export default {

		data() {
			return {
				imgStaticUrl: '',
				isLogin: false, //判断是否登陆
				newActive1: false,
				newActive2: false,
				newActive3: false,
				isPay: false, //是否付款
				commentNum: '',
				role: '',
				list: [],
				defaultAvatar: '',
				showBox: 0,
				serviceHotline: '',
				serviceUserToken: '',
				token: '',
				myuserinfo: {},
				wxUserInfo: {},
				myHeadStyle: {},
				cosUrl: '',
				bgheadSrc: '',
				isInviteModelShow: false,
				inviterInfo: {},
				wecode: '',
				avatarUrl: '',
				gender: '',
				nickName: '游客',
				inviterID: '',
				goodsList: [],
				loadingType: 0,
				imcountnumtips:0,
				timeclearmy:null,
				vip:0,
			}
		},
		components: {
			ShareMask,
			goodsCard
		},

		onShow() {
			this.getUserInfo()
			this.asyncMessageImCount()
			this.LocationMessageImCount()
		},
		onHide(){
			console.log("yincang my")
			clearInterval(this.timeclearmy)
		},
		//小程序分享
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			const myuserinfo = this.myuserinfo
			/**
			 * @param {string} name -  分享人名称
			 * @param {string} avatar -  分享人头像
			 * @param {string} id -  分享人id
			 * @description: 分享小程序携带的参数
			 * @date: 15:57
			 */
			const shareData = {
				name: myuserinfo.user_name,
				avatar: myuserinfo.headimgurl,
				id: myuserinfo.id,
			}
			return {
				title: `${myuserinfo.user_name}${this.$t('邀请您注册')}${this.$AppName}`,
				path: '/pages/tabBar/my?wechatShare=' + JSON.stringify(shareData),
				imageUrl: myuserinfo.headimgurl
			}
		},

		onLoad(data) {
			this.token = uni.getStorageSync('token') || ''
			this.imgStaticUrl = this.STATICURL;  // 线上图片地址（兼容微信小程序写法）
			// #ifdef APP-PLUS
			const currentWebview = this.$scope.$getAppWebview();
			getCurrentPages()
			// #endif

			// 初始化时获取小程序秘钥code 换取openId  （仅在初始化时获取一次，不要放在事件中重复获取会解密失败）
			// #ifdef MP-WEIXIN

			uni.login({
				provider: "weixin",
				success: loginRes => {
					this.wecode = loginRes.code
				},
				fail: (err) => {
					this.$toast(JSON.stringify(err));
				},
			});
			// #endif

			this.cosUrl = this.STATICURL
			this.bgheadSrc = `url(${this.STATICURL}images/bg-myhead3.jpg)`

			this.getServiceHotline();

			uni.$on('openShareApp', () => {
				this.goShare()
			})
			this.role = uni.getStorageSync('role') || ''; //角色身份
			if (data.wechatShare) {

				this.inviterInfo = JSON.parse(data.wechatShare)
				this.isInviteModelShow = true
			}
			uni.$on('accountLogin', data => {
				console.log("-> data", data);
				this.getUserInfo()
			})

			page = 1
			this.getGoodsList()
			this.getServiceUserToken()

		},
		onUnload() {
			uni.$off('openShareApp', () => {})
			uni.$off('accountLogin', () => {})
		},
		computed: {
			...mapGetters([
				'showMutipleShopper'
			]),
			getapplyDistributorBanner() {
				return this.STATICURL + 'images/distribution/bg-applyDistributor.jpg'
			},
			getImgInviteBanner() {
				return this.STATICURL + 'images/distribution/img-invite3.png'
			},
			roleName() {
				return {
					shop: this.$t('商家'),
					user: this.$t('普通用户'),
					service: this.$t('客服'),
				}
			},
			getRankName() {
				return this.myuserinfo.rank_name + this.$t('会员等级')
			},
		},


		onPullDownRefresh() {
			this.getUserInfo()
		},
		watch: {
			"newActive3": function() {
				this.newActive1 = true;
			},
			myuserinfo: {
				handler(val) {
					let bool = Object.keys(val).length
					if (bool !== 0) {
						this.isLogin = true
					} else {
						this.isLogin = false
					}
				}
			}
		},

		methods: {
			asyncMessageImCount(){
				this.$http.messageImCount().then(res => {
					if(res.status == 200){
						this.imcountnumtips = res.data.imcountnumtips
						uni.setStorageSync('imcountnum',res.data.imcountnum)
						uni.setStorageSync('imcountnumtips', this.imcountnumtips)
					}
				})
			},
			LocationMessageImCount(){
				this.timeclearmy = setInterval(()=>{
					this.imcountnumtips = uni.getStorageSync("imcountnumtips")
				}, 1000);
			},
			toLive(id) {
				uni.setStorage({
					key: 'openLiveID',
					data: id,
					success: function() {
						// #ifndef APP-PLUS
						uni.navigateTo({
							url: '/pagesB/seller/live'
						});
						// #endif
						// #ifdef APP-PLUS
						uni.navigateTo({
							url: '/pagesC/live/Anchor'
						});
						// #endif
					}
				});

			},
			getWebviewPage(){
				this.$u.route({
					url: '/pagesB/webview/web',
					params: {
						url: this.myuserinfo.shopapi_url
					}
				});
			},
			goArticle(url, title) {
				this.$u.route({
					url: url,
					params: {
						title: title
					}
				})
			},
			showPopUpBox() {
				this.showBox = 1;
			},
			hideMask() {
				this.showBox = 0;
			},
			dail(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// #ifdef MP-WEIXIN
			// 微信小程序登录   code换区 小程序openid 和 session_key
			getOpenID() {
				return new Promise((resolve) => {
					this.$http.getWechatMiniProgramOpenid({
						code: this.wecode
					}).then(res => {
						resolve(res.data)

					});
				})
			},
			async wechatLogin() {
				this.inviterID = this.inviterInfo && this.inviterInfo.id
				const {openid='',session_key='',unionid=''} = await this.getOpenID()
				uni.setStorageSync('xcxOpenid', openid); //存取小程序openid
				uni.setStorageSync('xcxSessionKey', session_key);
				this.asyncUserInfo(openid, unionid);
				this.isInviteModelShow = false;

			},
			asyncUserInfo(openid = '', unionid = '') {
				if (openid == '') {
					return false;
				}
				this.$http.thirdLogin({
					oauth: 'weixin_mp',
					openid: openid,
					unionid: unionid,
					nick_name: this.nickName,
					uniongender: this.gender,
					iconurl: this.avatarUrl,
					inviter: this.inviterID
				}).then(result => {
					this.$toast(result.status)
					if (result.status == 200) {
						this.$store.commit('loginStatus', true)
						uni.setStorageSync('token', result.data.token);
						uni.setStorageSync('identity', result.data.identity);
						uni.setStorageSync('role', result.data.role);
						uni.setStorageSync('role_id', result.data.shop_id);
						uni.closeSocket({
							success() {
								console.log('socket关闭成功');
							},
							fail(res) {
								console.log(res);
							}
						})
						setTimeout(() => {
							this.im();
							this.$u.route({
								url: "/pages/tabBar/my",
								type: "reLaunch"
							})
						}, 500);

					}
					if (result.status == 400 || result.data.info == 'unregister') {
						console.log(result)
						this.$u.route({
							url: 'platforms/mp-weixin/miniLogin',
							params: {
								oauth: 'weixin_mp',
								openid: openid,
								unionid: unionid,
								nick_name: this.nickName,
								uniongender: this.gender,
								iconurl: this.avatarUrl,
								inviter: this.inviterID,
							}
						});
					}
				})
			},
			// #endif

			confirm() {

				this.$http.getpanduan().then(res => {

					if (res.status == 200) {
						if (res.data.zhuangtai == 2) { // 进入审核流程状态页
							this.getnav('/pagesC/applyshop/applyStatus')

						} else if (res.data.zhuangtai == 4) {
							this.getnav('/pagesC/loginSon/settingWx')
						} else {
							this.getnav('/pagesC/applyshop/applyType')
						}
					}
				})

			},
			navigateToArticle(url) {
				if (this.isLogin == 1) {
					uni.navigateTo({
						url: '/pagesB/article/detail?title=' + '' + url,
					})
				} else {
					uni.showToast({
						icon:'none',
						
						title: '请先登录',
						duration: 2000
					});
				}
			},
			navigateTo(url, type) {

				if (this.isLogin == 1) {
					this.$navigateTo(url)
				} else {
					// #ifndef MP-WEIXIN
					this.$navigateTo('/pagesB/login/login')
					// #endif
					// #ifdef MP-WEIXIN
					this.$navigateTo('/platforms/mp-weixin/miniLogin')
					// #endif
				}

			},
			async goShare() {
				const data = await this.getShareData()
				const mask = this.$refs['shareMask']
				mask.shareTit = data.title; //分享标题
				mask.shareLink = `${data.linkurl}?inviter=${this.myuserinfo.id}`; // 分享参数字段 inviter
				mask.shareText = data.content + mask.shareLink; //分享文字内容
				mask.shareImg = await data.tgimg; //分享图片
				mask.shareModel = true //分享弹窗打开

			},
			// 获取分享数据
			getShareData() {
				return new Promise((resolve, reject) => {
					this.$http.getShareData().then(res => {
						if (res.status === 200) {
							resolve(res.data)
						} else {
							reject(res)
						}
					})

				})
			},
			getUserInfo() {
				this.$http.getUserInfo().then(res => {
					if (res.status == 200) {
						uni.setStorageSync('userInfo', JSON.stringify(res.data));
						this.myuserinfo = res.data;
						this.isLogin = 1;
						this.vip = this.myuserinfo.vip;
						// vuex 提交用户信息
						this.$store.commit('setUserInfo', res.data)
					}
				})
			},
			getServiceHotline() {
				this.$http.getserviceHotline().then(res => {
					if (res.status == 200) {
						this.serviceHotline = res.data.serviceHotline;

					}
				})
			},
			getServiceUserToken() {
				this.$http.getServiceUserToken().then(res => {
					if (res.status == 200) {
						this.serviceUserToken = res.data.service_user_token;

					}
				})
			},
			chat() {
				if (!uni.getStorageSync('token')) {
					// #ifdef MP-WEIXIN
					uni.switchTab({
						url: '/pages/tabBar/my'
					});
					// #endif
					// #ifndef MP-WEIXIN
					uni.showToast({
											icon:'none',
											title: '请先登录',
											duration: 2000
										});
					// #endif
					return false
				}
				this.$u.route('/pagesB/message/chat',{
					toId : this.serviceUserToken
				})

			},
			// 跳转至订单列表页面
			order(url, data) {
				if (this.isLogin == 1) {
					this.$navigateTo(url, data)
				} else {
					uni.showToast({
						icon:'none',
						title: '请先登录',
						duration: 2000
					});
				}
			},
			getGoodsList() {
				this.$http.getGoodsList({
					page: page
				}).then(res => {
					if (res.status == 200) {
						if (res.data.length == 0) {
							this.loadingType = 2
							return false
						}
						this.goodsList = [...this.goodsList, ...res.data]
						this.loadingType = 0
					}
				})
			},
			onReachBottom() {
				if (this.loadingType == 1 || this.loadingType == 2) {
					return false
				}
				this.loadingType = 1
				page++
				this.getGoodsList()
			}

		},

	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/mixins.scss';
	@import '~uview-ui/index.scss';

	.page {
		padding-bottom: 100upx;
		position: relative;

		.headBg {
			position: absolute;
			width: 100%;
			height: 340upx;
			z-index: -1;
		}

		.shopCart {
			position: fixed;
			bottom: 140upx;
			right: 38upx;
			display: inline-block;
			z-index: 9999;
			animation: breathe 2s infinite;

			.dot {
				padding: 4upx;
				border-radius: 100upx;
				background-color: #FE3536;
				display: inline-block;
				color: #ffffff;
				position: absolute;
				right: -4upx;
				top: -4upx;
				width: 22upx;
				height: 22upx;
				font-size: 20upx;
				text-align: center;
				line-height: 22upx;
			}

			image {
				width: 60upx;

			}

			@keyframes breathe {
				0% {
					transform: scale(1)
				}

				50% {
					transform: scale(1.2)
				}

				100% {
					transform: scale(1)
				}
			}
		}

		.topBar {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			color: #fff;
			height: 141upx;
			z-index: 3;
			background-size: cover;

			.nav {
				height: 88upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					font-size: 36upx;
				}

				.nav-left {
					font-size: 28upx;
					position: absolute;
					right: 32upx;
				}
			}
		}

		.header {
			width: 100%;
			height: 409upx;
			position: absolute;
			left: 0;
			top: 0;
			background-image: linear-gradient(to right, #fa3f3f, #ff6262);
			background-size: cover;

		}

		.top {
			padding: 0;
			position: relative;

			.top-bg {

				display: flex;
				flex-direction: column;
				background-color: #ff4444;
				padding: 76upx 30upx 50upx;
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.person {
					display: flex;
					align-items: center;
					padding: 48upx 0;
					justify-content: space-between;

					.person-right {
						display: flex;
						align-items: center;
						width: 100%;

						.avatar {
							/* #ifndef MP-WEIXIN */
							box-shadow: 0 0 0 2rpx #ffefef, 0 0 0 4rpx #ffd0d0;
							/* #endif */
						}
					}

					.rechargeBtn {
						display: inline-block;
						padding: 6upx 24upx;
						background: #fff;
						color: #555;
						border-radius: 100upx;
						display: flex;
						align-items: center;
						box-shadow: 0 0 20upx #e2e3e4;

						.signIn {
							width: 32upx;
							height: 32upx;
							margin-right: 6upx
						}
					}

					.personInfo {
						margin-left: 25upx;
						flex: 1;
						color: #fff;

						.vipBadgeBox {
							display: inline-block;
							padding: 0 10upx;
							background: linear-gradient(to right, #ffa468, #fa3f3f);
							border-radius: 100px;
							color: #fff;
							font-weight: 600;
							text-align: center;

							.vipBadge {
								display: inline-block;
								width: 36upx;
								height: 36upx;
								font-size: 10px;
								border-radius: 200px;
								background-color: #ffa468;
								box-shadow: inset 0 4px 4px #ffa468;
								padding: 4upx;
								border: 5upx solid #ff771e;
								margin-right: 8upx
							}
						}

						.name {
							font-size: 38upx;
							font-weight: 500;
							display: flex;
						}

					}

					.login {
						margin-left: 16upx;
						font-weight: 500;
						font-size: 34upx;
					}
				}

				.menus {
					flex: 1;
					display: flex;
					align-items: flex-end;
					justify-content: center;
					margin-top: 16upx;

					.item {
						text-align: center;
						flex: 1;

						.volum {
							position: relative;
							line-height: 37upx;
							font-weight: 500;
							font-size: 28upx;

							.markDot {
								width: 12upx;
								height: 12upx;
								background: red;
								border-radius: 200upx;
								position: absolute;
								top: -4upx;
							}
						}

						.label {
							line-height: 37upx;
							margin-top: 8upx;
						}
					}
				}
			}
		}

		.box {

			position: relative;
			box-shadow: 0 0 20upx #ebeef3;
			padding: 0;
			margin: 0 20rpx;
			width: 710rpx;

			.innerBox {
				background: #fff;
				border-radius: 20upx;
				padding: 20upx;

				.order-title {
					display: flex;
					justify-content: space-between;
					height: 70rpx;
					margin-top: 6rpx;

					.left {
						font-size: 26rpx;
						font-weight: bold;
					}

					.right {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.tools {
					padding-bottom: 0;
				}

				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.titleLeft {
						line-height: 40upx;
						font-weight: 600
					}

					.titleRight {
						display: flex;
						align-items: center;

						.more {
							margin-left: 12upx;
						}
					}

				}

				.Orderlist {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						position: relative;

						.orderMarkNum {
							position: absolute;
							top: -6upx;
							right: -12upx;
							background-color: #F95658;
							color: #ffffff;
							width: 26upx;
							height: 26upx;
							text-align: center;
							line-height: 26upx;
							border-radius: 100upx;
							font-size: 20upx;
							z-index: 99;
						}

						.icon {
							width: 56upx;
							height: 56upx;
							position: relative;

							image {
								width: 56upx;
								height: 56upx;
							}
						}

						.text {
							line-height: 33upx;
							margin-top: 6upx;
						}

					}
				}

				.toolsList {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 24upx;

					.toolsItem {
						width: 20%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-bottom: 28upx;
						position: relative;

						.payNote {
							position: absolute;
							top: -16upx;
							right: -16upx;
							background-color: #FA3E3F;
							border-radius: 200upx;
							border-bottom-left-radius: 0;
							padding: 0px 12upx;
							font-size: 20upx;
							color: #FFFFFF;

						}

						.icon {
							width: 64upx;
							height: 64upx;
							border-radius: 100px;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.text {
							line-height: 33upx;
							margin-top: 16upx;
						}
					}
				}
			}
		}

		.tabs {
			display: flex;
			margin: 20upx 0;
			padding: 0 32upx;
			justify-content: space-between;

			.tabItem {
				position: relative;

				&:first-child {
					.bg {
						width: 328upx;
						height: 246upx;
					}

					.innerContent {
						.title {
							color: #C89D40;
						}

						.descripe {
							color: #C89D40;
							width: 204upx;
						}
					}
				}

				&:last-child {
					.bg {
						width: 330upx;
						height: 248upx;
					}

					.innerContent {
						.title {
							color: #92AFD4;

						}

						.descripe {
							color: #92AFD4;
							width: 190upx;
						}
					}
				}

				.innerContent {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					padding: 28upx;

					.title {
						line-height: 40upx;
						padding-top: 22upx;
						padding-bottom: 25upx;
						font-weight: bold;
					}

					.descripe {
						line-height: 33upx;
					}

					.viewMore {
						display: flex;
						justify-content: flex-end;

						.icon {
							width: 44upx;
							height: 44upx;
						}
					}
				}
			}
		}

		.mask {
			position: fixed;
			bottom: 0;
			top: 0;
			left: 0;
			right: 0;
			background: rgba(0, 0, 0, 0.3);
			z-index: 4;
		}

		.popUpBox {
			position: fixed;
			width: 402upx;
			height: 452upx;
			background: #fff;
			z-index: 999;
			border-radius: 20upx;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.tel {
				text-align: center;
				margin-top: -25upx;

				image {
					width: 174upx;
					height: 174upx;
				}
			}

			.text {
				line-height: 43upx;
				font-weight: bold;
				text-align: center;
			}

			.button {
				width: 247upx;
				height: 66upx;
				border-radius: 45upx;
				position: absolute;
				bottom: 36upx;
				left: 50%;
				transform: translate(-50%, 0)
			}

			.cancel {
				width: 53upx;
				height: 53upx;
				position: absolute;
				left: 50%;
				transform: translate(-50%, 0);
				bottom: -75upx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.wechatLoginBtn {
		font-size: 24upx;
		border: none;
		color: #fff;
		background-image: linear-gradient(to right, #ffa468, #fa3f3f);
		border-radius: 200upx;
		margin-left: 20upx
	}

	.iconWrap {
		display: flex;
		align-items: center;
		font-size: 28upx;

		.setting {
			width: 36upx;
			height: 36upx;
		}
	}

	.loginWrap {
		padding-top: 90upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 999;
		text-align: center;

		.tips {
			color: #999
		}

		.login {
			background: #ffd400;
			padding: 15upx 100upx;
			font-size: 32upx;
			margin-top: 30upx;
			display: inline-block;
		}
	}

	.userName {
		font-weight: 600;
		font-size: 32upx;
	}

	.distribution {
		background-color: #fff;
		border-radius: 16upx;
		padding: 15upx 0;
	}

	.swiperBox {
		margin: 12upx 30upx;
	}

	.distributorWrap {

		padding: 10upx 30upx;

		.inviteBtn {
			background-color: transparent;

			&::after {
				border: none;
			}
		}
	}

	.topPanelWrap {
		display: flex;
		justify-content: space-between;
		text-align: center;
		padding: 20upx;
		color: #fff;

		.topPanelNum {
			font-size: 32upx;
			font-weight: 800;
		}
	}

	.topPanelWrap {
		display: flex;
	}

	.integralBox {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 20upx 30upx;
		margin: -35upx 20upx 15upx;
		border-radius: 20upx;
		z-index: 1;
		position: relative;

		&title {
			font-size: 30upx;
		}

		&item {
			position: relative;
			flex: 1;

		}

		&icon {
			position: absolute;
			top: 50%;
			right: 28upx;
			transform: translateY(-50%);
		}

		&tip {
			color: #a6aaad;
			font-size: 24upx;
		}
	}

	.invitePanel {
		text-align: center;
		padding: 50upx 20upx;

		.bottom {
			margin-top: 50upx;

			span {
				width: 50%;
				text-align: center;

				&:first-child {
					color: #7b7b7b
				}

				&:nth-child(2) {
					color: #19be6b
				}
			}
		}
	}

	.cardTit {
		width: 100%;
		color: #444;
		display: flex;
		justify-content: center;
		align-items: center;

		.cardTitbadge {
			background-color: #ff4444;
			color: #fff;
			font-size: 10px;
			display: inline-flex;
			align-items: center;
			height: 32rpx;
			font-weight: normal;
			border-radius: 6rpx;
			margin-left: 10rpx;
			padding: 2rpx 8rpx;
			border-top-right-radius: 14rpx;
			border-bottom-left-radius: 14rpx;
		}
	}

	/deep/.u-waterfall {
		width: 730rpx;
		margin: 0 10rpx;
		/* #ifndef MP-WEIXIN */
		margin-top: 30rpx;
		/* #endif */
	}
	.imcount{
		width:40rpx;
		height:40rpx;
		background:#ffb2b2;
		position:relative;
		display:inline-block;
		bottom:30rpx;
		right: 10rpx;
		border-radius: 30rpx;
		line-height:40rpx;
		font-size:8rpx;
		text-align: center;
	}
</style>
